<template>
  <div class="mavon-editor-box">
    <mavon-editor 
      v-model="val" 
      @input="emitVal" 
      @imgAdd="$imgAdd" 
      @imgDel="$imgDel" 
      :toolbars="toolbars"
      ref="md"
      class="mavon-editor" />
  </div>
</template>

<script>
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
// markdown-it对象：md.s_markdown, md => mavonEditor实例
//                 or
//                 mavonEditor.markdownIt 
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)

import axios from "axios"
import { domain } from '@/config'
import { getCookie } from '@/utils/tool'

export default {
  name: 'MarkdownEditor',
  props: {
    value: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      required: false,
      default() {
        return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
      }
    }
  },
  data() {
    return {
      val: '',
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: false, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        // save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        // navigation: true, // 导航目录
        /* 2.1.8 */
        // alignleft: true, // 左对齐
        // aligncenter: true, // 居中
        // alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      }
    }
  },
  watch: {
    // value(val) {
    //   console.log(val)
    //   this.val = val
    // }
  },
  mounted() {
    console.log(this.$refs.md.$img2Url)
    this.val = this.value
  },
  methods: {
    $imgAdd(pos, $file) {
      var formdata = new FormData();
      formdata.append("file", $file);
      axios({
        method: "post",
        url: `${domain}serv-onelab/api/1/file/media/upload`,
        data: formdata,
        headers: {
          Authorization: decodeURIComponent(getCookie('console_login_ticket')),
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(res => {
        console.log(res.data.result)
        this.$refs.md.$img2Url(pos, res.data.result)
        // $vm && $vm.$img2Url(pos, url);
      })
    },
    $imgDel() {

    },
    emitVal() {
      this.$emit('val', this.val)
    },
  }
}
</script>

<style scoped lang="less">
.mavon-editor-box{
  height: 100%;
  /deep/ .shadow img{
    position: initial;
  }
}
.mavon-editor{
  height: 100%;
}
</style>
